<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{number}}-{{title}}</title>
    <!-- 引入ACE插件 -->
    <!-- 官网链接：https://ace.c9.io/ -->
    <!-- CDN链接：https://cdnjs.com/libraries/ace -->
    <!-- 使用介绍：https://www.iteye.com/blog/ybc77107-2296261 -->
    <!-- https://justcode.ikeepstudying.com/2016/05/ace-editor-%E5%9C%A8%E7%BA%BF%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E6%9E%81%E5%85%B6%E9%AB%98%E4%BA%AE/-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="/css/index.css">
    <style>
        /*onequestion 样式设计*/
        /*左右呈现，左边题目标题和描述*/
        .container .part1{
            width: 100%;
            height: 75%;
            overflow: hidden; /*防止浮动出现问题*/
        }
        .container .part1 .left_desc{
            width: 50%;
            height: 600px;
            float: left;
            overflow: scroll; /*增加了滚动条*/
        }
        .container .part1 .left_desc h3{
            padding-top: 10px;
            padding-left: 10px;
        }
        .container .part1 .left_desc h5{
            padding-left: 10px;
        }
        .container .part1 .left_desc pre{
            padding-top: 10px;
            padding-left: 10px;
            font-size: medium;
            font-family:Verdana, Geneva, Tahoma, sans-serif;
        }
        .container .part1 .right_code{
            width: 50%;
            float: right;
        }
        .container .part1 .right_code .ace_editor{
            height: 600px;  /*保证ace的正常工作必须在这里设置*/
        }

        /*底部提交代码，并且显示结果*/
        .container .part2{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .container .part2 .result{
            width: 58%;
            float: left;
            margin-top: 15px;
            margin-left: 15px;
            /* overflow: scroll;  增加滚动条 */
            overflow-y: scroll;  /*增加竖直滚动条*/
        }
        .container .part2 .result pre{
            font-size: large;
            height: 100%;
        }
        .container .part2 .bt{
            margin-top: 10px;
	        margin-right: 10px;
            width: 94px;
            height: 32px;
            font-size: 14px;
            float:right;
            background-color: #26bb9c14;
            color: rgba(0,191,128);
            border-radius: 4px;  /*带圆角*/
            border: 0px;  /*边框不要了*/
        }
        .container .part2 button:hover{
            background-color: green;
        }
        .container .part2 textarea{
            display:inline-block;
            width: 26%;
            height: 150px;
            resize: none;
            border-radius: 5px;
            font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
            font-size: large;
            color: blue;
            /* overflow: auto; */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="navbar">
            <a href="/">首页</a>
            <a href="/all_questions">题库</a>
            <a href="#">讨论</a>
            <button id="loginBtn" class="login">登录</button>
        </div>
        <div class="part1">
            <div class="left_desc">
                <h3><span id="number">{{number}}</span>.{{title}}</h3>
                <h5>难度: {{star}} 限制运行时间: {{cpu}}s 限制内存: {{mem}}MB</h5>
                <pre>{{desc}}</pre>
            </div>
            <div class="right_code">
                <pre id="code" class="ace_editor"><textarea class="ace_textinput">{{pre_code}}</textarea></pre>
            </div>
        </div>
        <div class="part2">
            <div class="result">
                <pre></pre>
            </div>
            <textarea id="input" placeholder="这里输入你要测试的值"></textarea>
            <button class="bt" onclick="submit()">提交代码</button>
            <button class="bt" onclick="test()">测试运行</button>
        </div>
    </div>

    <!--modal模块-->
    <div id="loginModal" class="modal">
        <div class="modal-content">
          <span class="close">&times;</span>
          <h2>登录</h2>
          <form id="loginForm">
            <input class="acc" type="text" id="username" name="username" placeholder="用户名">
            <div class="user_error">
                <pre></pre>
            </div>
            <input class="acc" type="password" id="password" name="password" placeholder="密码">
            <div class="password_error">
                <pre></pre>
            </div>
            <input class="btn" type="submit" value="登录">
            <p>没有账号？点击这里:</p>
            <button id="registerBtn">注册</button>
          </form>
        </div>
    </div>

    <div id="registerModal" class="modal">
        <div class="modal-content">
          <span class="close">&times;</span>
          <h2>注册</h2>
          <form id="registerFrom">
            <input class="acc" type="text" id="regUsername" name="regUsername" placeholder="用户名不为空">
            <div class="user_error">
                <pre></pre>
            </div>
            <input class="acc" type="password" id="regPassword" name="regPassword" placeholder="密码至少4位">
            <div class="password_error">
                <pre></pre>
            </div>
            <input class="btn" type="submit" value="注册">
          </form>
        </div>
    </div>

    <!-- 个人信息弹窗 -->
    <div id="userProfileModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <!-- 欢迎用户 -->
            <h2 id="welcomeMsg">welcome</h2>
            <div align="center" class="img">
                <img src="/images/user.jpg" alt="user.jpg" width="157" height="165">
            </div>
            <!-- 修改密码按钮 -->
            <button id="users" onclick="changePassword()">修改密码</button>
            <!-- 退出登录按钮 -->
            <button id="users" onclick="logout()">退出登录</button>
        </div>
    </div>

    <div id="changePasswordModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>修改密码</h2>
            <canvas id="captchaCanvas" width="300" height="20"></canvas>
            <form id="changePasswordFrom">
            <input class="acc" type="text" id="verCode" name="verCode" placeholder="输入四位验证码">
            <div class="user_error">
                <pre></pre>
            </div>
            <input class="acc" type="text" id="oldPassword" name="oldPassword" placeholder="旧的密码">
            <div class="user_error">
                <pre></pre>
            </div>
            <input class="acc" type="password" id="newPassword" name="newPassword" placeholder="新的密码,密码至少4位">
            <div class="password_error">
                <pre></pre>
            </div>
            <input class="acc" type="password" id="newPassword" name="newPassword" placeholder="再次确认输入新密码">
            <div class="password_error">
                <pre></pre>
            </div>
            <input class="btn" type="submit" value="修改">
            </form>
        </div>
    </div>
    <script src="/js/login.js" type="text/javascript" charset="utf-8"></script>

    <script>

        // checkUserLoginStatus 函数：检查用户是否已登录，基于 cookie 实现
        function checkUserLoginStatus() {
            // 获取浏览器中的 cookie 字符串
            var cookies = document.cookie;

            // 将 cookie 字符串拆分成键值对
            var cookieArr = cookies.split('; ');

            // 遍历所有 cookie，查找是否存在名为 "session_id" 的 cookie
            for (var i = 0; i < cookieArr.length; i++) {
                var cookie = cookieArr[i].split('=');
                if (cookie[0] === 'session_id') {
                    return true;
                }
            }

            // 没有找到 session_id，表示用户未登录
            return false;
        }

        //初始化对象
        editor = ace.edit("code");
        //设置风格和语言（更多风格和语言，请到github上相应目录查看）
        // 主题大全：http://www.manongjc.com/detail/25-cfpdrwkkivkikmk.html
        editor.setTheme("ace/theme/monokai");
        editor.session.setMode("ace/mode/c_cpp");
        // 字体大小
        editor.setFontSize(16);
        // 设置默认制表符的大小:
        editor.getSession().setTabSize(4);
        // 设置只读（true时只读，用于展示代码）
        editor.setReadOnly(false);
        // 启用提示菜单
        ace.require("ace/ext/language_tools");
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });

        /*前后端交互代码编写 -使用语言：js 使用jQuery进行快速编写*/
        function submit()
        {
            // alert("你点击了提交哦!");  // 测试
            // console.log('你点击了提交哦');  // 使用log在控制台中显示消息

            // 先查看是否登录
            if (!checkUserLoginStatus())
            {
                alert("请登陆后提交！");
            }
            else
            {
                // 获取用户代码
                var code = editor.getSession().getValue();  // 获取用户代码
                // console.log(code);  // 测试
                
                // 获取题目id
                var number = $('.container .part1 .left_desc h3 #number').text();
                // console.log(number);  // 测试
                
                // 构成向后端服务申请路由
                var judge_url = '/judge/' + number;

                // 构建json，并通过ajax向后台发送基于http的请求
                $.ajax({
                    method: 'Post',
                    url: judge_url,
                    dataType: 'json',  // 我们需要对方返回的类型
                    contentType: 'application/json;charset=utf8',  // 我向对方发送数据类型
                    data: JSON.stringify({
                        'test_input': false,
                        'code': code,
                        'input': ''
                    }),
                    success: function(data){  // 成功后执行此匿名函数
                        // console.log(data);
                        show_result(data);
                    },
                });
                
                // 得到结果，解析到result中去。
                function show_result(data)
                {
                    // console.log(data.status); // 测试 .reason
                    // 拿到result结果标签
                    var result_div = $(".container .part2 .result");
                    // 每次进来清空上一次的运行结果
                    result_div.empty();
                    // 拿到结果的状态码和原因结果
                    var _status = data.status;
                    var _reason = data.reason;
                    var reason_lable = $("<p>", {
                        text : _reason
                    });
                    reason_lable.appendTo(result_div);  // 插入到之前的标签页面内
                    if (status == 0){
                        // 请求成功，编译运行过程没问题，结果是否通用看stdout的输出结果
                        var _stderr = data.stderr;
                        var _stdout = data.stdout;
                        
                        var stdout_lable = $("<pre>", {
                            text: _stdout 
                        });
                        // err同理
                        var stderr_lable = $("<pre>", {
                            text: _stderr
                        });

                        stdout_lable.appendTo(result_div);
                        stderr_lable.appendTo(result_div);
                    }
                    else{
                        // 编译运行出错
                    }
                }
            }
        }

        /*前后端交互代码编写 -使用语言：js 使用jQuery进行快速编写*/
        // 代码input功能
        function test()
        {
            if (!checkUserLoginStatus())
            {
                alert("请登陆后测试！");
            }
            else
            {
                // 获取用户代码
                var code = editor.getSession().getValue();  // 获取用户代码
                var input = document.getElementById("input").value;  // 获取用户输入数据
                // console.log(code);  // 测试
                // console.log(input);
                
                // 获取题目id
                var number = $('.container .part1 .left_desc h3 #number').text();
                // console.log(number);  // 测试
                
                // 构成向后端服务申请路由
                var judge_url = '/judge/' + number;

                // 构建json，并通过ajax向后台发送基于http的请求
                $.ajax({
                    method: 'Post',
                    url: judge_url,
                    dataType: 'json',  // 我们需要对方返回的类型
                    contentType: 'application/json;charset=utf8',  // 我向对方发送数据类型
                    data: JSON.stringify({
                        'test_input': true,
                        'code': code,
                        'input': input
                    }),
                    success: function(data){  // 成功后执行此匿名函数
                        // console.log(data);
                        show_result(data);
                    },
                });
                
                // 得到结果，解析到result中去。
                function show_result(data)
                {
                    // console.log(data.status); // 测试 .reason
                    // 拿到result结果标签
                    var result_div = $(".container .part2 .result");
                    // 每次进来清空上一次的运行结果
                    result_div.empty();
                    // 拿到结果的状态码和原因结果
                    var _status = data.status;
                    var _reason = data.reason;
                    var reason_lable = $("<p>", {
                        text : _reason
                    });
                    reason_lable.appendTo(result_div);  // 插入到之前的标签页面内
                    if (status == 0){
                        // 请求成功，编译运行过程没问题，结果是否通用看stdout的输出结果
                        var _stderr = data.stderr;
                        var _stdout = data.stdout;
                        
                        var stdout_lable = $("<pre>", {
                            text: _stdout 
                        });
                        // err同理
                        var stderr_lable = $("<pre>", {
                            text: _stderr
                        });

                        stdout_lable.appendTo(result_div);
                        stderr_lable.appendTo(result_div);
                    }
                    else{
                        // 编译运行出错
                    }
                }
            }
        }
    </script>
</body>
</html>